
{% extends 'register_app/main.html' %}


<!-- both scripts and html together, maby move scripts into snother file -->
{% block content %}

  <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

  <!-- login logout and such things shoud be in main template -->
  <div class="header-bar">
      <div>
          <h1>Hello {{request.user|title}} !</h1>
          <h3 style="margin:0">You have <i>{{count}} </i>lesson topics to complete</h3>
      </div>

      {% if request.user.is_authenticated %}
        <a href="{% url 'logout' %}">Logout</a>
      {% else %}
        <a href="{% url 'login' %}">Login</a>
      {% endif %}
  </div>


  <div id="search-add-wrapper">
      <form method="GET" style="display: flex;">
          <input type='text' name='search-area' placeholder="Enter name" value="{{search_input}}">
          <input class="button" type="submit" value='Search'>
      </form>

  <div id="search-add-wrapper">
      <form method="post" style="display: flex;" action="{% url 'generate-csv' %}">
          {% csrf_token %}
          <input type="text" name="student_name" placeholder="Enter name">
          <button class ="button" type="submit">Download_csv</button>
        </form>
  </div>

  {% if tasks|length > 0 %}
    <a id="add-link" href="{% url 'task-create' %}">&#x2b;</a>
  {% endif %}
  </div>

  <!--new item positions / new location after dragging to another place -->
  <form style="display: none;" id="reorderForm" method="post" action="{% url 'task-reorder' %}">
      {% csrf_token %}
      <input type="hidden" id="positionInput" name="position">
  </form>


  <div id="tasklist" class="task-items-wrapper">
      {% for task in tasks %}
        <div class="task-wrapper" data-position="{{task.pk}}">
            <div class="task-title">
                {% if task.absent %}
                  <div class="task-absent-icon"></div>
                  <i><s><a href="{% url 'task-update' task.id %}">{{task}}</a></s></i>
                {% elif task.present %}
                  <div class="task-present-icon"></div>
                  <a href="{% url 'task-update' task.id %}">{{task}}</a>
                {% else %}
                  <div class="task-empty-icon"></div>
                  <a href="{% url 'task-update' task.id %}">{{task}}</a>
                {% endif %}
            </div>
            <div class="task-controls">
                <a class="delete-link" href="{% url 'task-delete' task.id %}">&#215;</a>
                <span class="handle">&nbsp;&#10247;</span>
            </div>
        </div>

        {% empty %}
        <div style="text-align: center; padding-bottom: 10px; line-height: 1em;">
            <h3>No data available for display</h3>
            <h3>Create a new entry<a style="text-decoration: none; color: #e53935;" href="{% url 'task-create' %}"> New entry</a> ! </h3>
        </div>
      {% endfor %}
  </div>

  <script>
      var taskList = document.getElementById("tasklist");
      var reorderForm = document.getElementById("reorderForm");
      var positionInput = document.getElementById("positionInput");

      let sortable = Sortable.create(taskList, {
          handle: '.handle',
          ghostClass: 'dropArea',
          chosenClass: 'selectedTask',
      });

      function reordering() {
          const rows = document.getElementsByClassName("task-wrapper");
          let pos = [];
          for (let row of rows) {
              pos.push(row.dataset.position);
          }
          console.log(pos.join(","))
          positionInput.value = pos.join(',');
          reorderForm.submit();
      }

      document.ondrop = reordering
  </script>

{% endblock content %}
